<template>
	<el-dialog
		title="新增商品"
		v-model="cuVisible"
		width="1200px"
		top="0"
		:destroy-on-close="true"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-form inline v-model="search" label-position="right">
							<el-form-item label="分类">
								<el-cascader
									v-model="search.category_id"
									:options="shopCategorys"
									:props="{
										value: 'id',
										label: 'cat_name',
										children: 'children',
										emitPath: false,
										checkStrictly: true
									}"
									clearable
								/>
							</el-form-item>
							<el-form-item label="关键词">
								<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<el-table
					:data="goodsData"
					style="width: 100%"
					@selection-change="selectionChange"
					max-height="650"
				>
					<el-table-column prop="cover" label="商品">
						<template #default="scope">
							<goods-info-item :row="scope.row" :baseUrl="baseUrl" />
						</template>
					</el-table-column>
					<el-table-column prop="price" label="价格" width="100">
						<template #default="scope">
							<div class="goods-info page-shop-goods-price-box">
								<div class="price">
									<div>{{ getMoneyByMinute(scope.row.min_price) }}</div>
									<div v-show="scope.row.min_price != scope.row.max_price">
										{{ getMoneyByMinute(scope.row.max_price) }}
									</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="stock" label="库存" width="100" />
					<el-table-column prop="status" label="状态" width="80">
						<template #default="scope">
							{{ scope.row.status == 1 ? "上架" : "仓库" }}
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<template #default="scope">
							<el-button @click="selectGoods(scope.row)" type="text" size="small">
								选择
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageInfo.page_index"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageInfo.page_size"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageInfo.tatal_count"
					hide-on-single-page
				/>
			</el-main>
		</el-container>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closePop" size="mini">关闭</el-button>
			</div>
		</template>
	</el-dialog>
	<add-goods-box-select-pop ref="addGoodsBoxSelectPop" @confirm="popConfirm" />
</template>

<script>
import AddGoodsBoxSelectPop from "./addGoodsBoxSelectPop";
export default {
	name: "addGoodsBox",
	components: {AddGoodsBoxSelectPop},
	data() {
		return {
			activityId: 0,
			// 搜索
			search: {
				category_id: "",
				keyWord: ""
			},
			defaultSearch: {
				keyWord: "",
				category_id: "",
			},
			// 商品列表
			goodsData: [],
			// 分页
			pageInfo: {
				page_index: 1,
				page_size: 10,
				tatal_count: 0
			},
			// 商品分类
			shopCategorys: [],
			// 基础路径
			baseUrl: "",
			cuVisible: false,
		};
	},
	emits: ["close"],
	mounted() {
		this.getBaseUrl();
	},
	methods: {
		show(_activityId) {
			this.activityId = _activityId;
			this.cuVisible = true;
			this.getsShopCategorys();
			this.upsearch();
		},
		async getBaseUrl() {
			this.baseUrl = await this.$TOOL.getBaseUrl();
			console.log(this.baseUrl);
		},
		closePop() {
			this.cuVisible = false;
			this.$emit("close");
		},
		// 获取商品列表
		getGoodsList() {
			this.$API.shop.goods.page({
				page_index: this.pageInfo.page_index,
				page_size: this.pageInfo.page_size,
				activity_id: this.activityId,
				...this.search
			}).then(res => {
				console.log(res)
				this.goodsData = res.data.list;
			});
		},
		// 获取商品分类
		getsShopCategorys() {
			this.$API.shop.category
				.list({
					type_str: "shop"
				})
				.then((res) => {
					this.shopCategorys = this.$TOOL.deepTree(res.data, "parent_id");
				});
		},
		// 搜索
		upsearch() {
			this.pageInfo.page_index = 1;
			this.getGoodsList();
		},
		// 选择
		selectionChange(val) {
			this.$emit("selectionChange", val);
		},
		// 选择商品
		selectGoods(row) {
			this.$refs.addGoodsBoxSelectPop.show(this.activityId,row.id, row.goods_name);
		},
		// 分页
		handleSizeChange(val) {
			this.pageInfo.page_size = val;
			this.getGoodsList();
		},
		handleCurrentChange(val) {
			this.pageInfo.page_index = val;
			this.getGoodsList();
		},
		// 刷新
		tableRefresh() {
			this.search = { ...this.defaultSearch };
			this.getGoodsList();
		},
		// 获取金额
		getMoneyByMinute(_val) {
			return this.$TOOL.getMoneyByMinute(_val);
		},
		popConfirm() {

		}
	},
}
</script>

<style scoped>

</style>
